import React, { Component } from 'react';
import axios from './../../axios';
import { 
	Card,
	ConfigProvider,
	Pagination,
	Modal,
	Form,
	Input,
	Button,
	message,
	Select,
	Tag,
	Switch
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN';

const Option = Select.Option;

const typeList = {
	"1":<Tag color="blue">文档</Tag>,
	"2":<Tag color="cyan">图片</Tag>,
	"3":<Tag color="geekblue">视频</Tag>,
	"4":<Tag color="red">音频</Tag>,
	"5":<Tag color="orange">其它</Tag>
}

class IpPage extends Component {
	state = {
		dataSource: [],//列表数据
		count: 0,//列表总条数
		requestParams: {//请求列表数据的参数
			field: "", 
			value: "", 
			page: 1, 
			limit: 10
		},
		pageSizeOptions:["10","20","50"],//表格显示每页多少条分页记录数
		isCreateVisible: false,//模态框
		formTitle: "添加扩展名",//模态框标题
	}
	
	formRef = React.createRef();//创建和修改模态框表单
	searchFormRef = React.createRef();//搜索信息表单
	
	//获取列表数据
	requestList = (data) => {
		axios.ajax({
			url: "/Manager/ExtMng/extRetrieve", 
			method: "post",
			data: data,
		}).then(res=>{
			if(res.code === 0){
				//Table的数据没有key就报错，自己加一个key
				// let resData = res.result.data.map((item, index)=>{
				// 	let key = index;
				// 	return {...item, key}
				// })
				// this.setState({
				// 	dataSource: resData,
				// 	count: res.result.count
				// })
				this.setState({
					dataSource: res.result.data,
					count: res.result.count
				})
			}
		}).catch(err=>{
		})
	}
	
	//查询列表数据
	searchSubmit = values => {
		let data = {...this.state.requestParams};
		if(!values.value && !values.field){
			data.field = "";
			data.value = "";
		}else{
			data.field = values.field;
			data.value = values.value;
		}
		this.setState({
			requestParams: data
		})
		this.requestList(data);
	}
	
	//分页功能，点击某页
	pageChange= (current, pageSize) => {
		let data = {...this.state.requestParams};
		data.page = current;
		data.limit = pageSize;
		this.setState({
			requestParams: data
		})
		this.requestList(data);
	}
	
	//分页功能，选择每页显示几个
	pageSizeChange = (current, pageSize) => {
		let data = {...this.state.requestParams};
		data.page = 1;
		data.limit = pageSize;
		this.setState({
			requestParams: data
		})
		this.requestList(data);
	}
	
	//点击添加按钮
	handleCreate = () => {
		this.setState({
			isCreateVisible: true,
			formTitle: "添加扩展名"
		});
		setTimeout(()=>{//添加清空表单
			this.formRef.current.resetFields()
		},100)
	}
	
	//点击编辑按钮
	handleUpdate = (record) => {
		this.setState({
			isCreateVisible: true,
			selectedItem: record,
			formTitle: "修改扩展名"
		});
		setTimeout(()=>{
			//为模态框赋值
			this.formRef.current.setFieldsValue(record);
		},300)
	}
	
	//数据保存提交
	handleSubmit = values => {
		//新增url
		let url = "/Manager/ExtMng/extCreate";
		//修改url
		if(this.state.formTitle === "修改扩展名"){
			url = "/Manager/ExtMng/extUpdate";
			values.id = this.state.selectedItem.id;
		}
		axios.ajax({
			url: url,
			method: "post",
			data: values
		}).then(res=>{
			if(res.code === 0){
				message.success(res.msg);
				this.requestList(this.state.requestParams);
			}
		})
		this.setState({
			isCreateVisible: false
		})
		this.formRef.current.resetFields();
	}
	
	//删除
	handleDelete = record => {
		Modal.confirm({
			title: `确认删除 ？`,
			icon: <ExclamationCircleOutlined />,
			content: "一经删除，不能恢复",
			okText: "确认删除",
			cancelText: "取消",
			onOk:()=>{
				axios.ajax({
					url: "/Manager/ExtMng/extDelete",
					method: "post",
					data: {id: record.id}
				}).then(res=>{
					if(res.code === 0){
						message.success(res.msg);
						this.requestList({
							field: "", 
							value: "", 
							page: 1, 
							limit: 5
						});
					}
				})
			}
		})
	}
	
	componentDidMount(){
		//获取公告列表信息
		this.requestList(this.state.requestParams);
	}
	
	//扩展名启用与禁用功能
	expUpdate = (checked,id)=>{
		let status = checked ? 1 : 0;
		axios.ajax({
			url: "/Manager/ExtMng/extUpdate",
			method: "post",
			data: {id,status}
		}).then(res=>{
			if(res.code === 0){
				message.success(res.msg);
				this.requestList(this.state.requestParams);
			}
		})
	}
	
	render(){
		const layout = {
		    labelCol: { span: 4 },
		    wrapperCol: { span: 20 },
		};
		const tailLayout = {
		    wrapperCol: { offset: 4, span: 20 },
		};
		// const columns = [
		// 	{
		// 		title: "扩展名",
		// 		dataIndex: "extension"
		// 	},{
		// 		title: "文件类型",
		// 		dataIndex: "type",
		// 		render: value => {
		// 			return {
		// 				"1":<Tag color="blue">文档</Tag>,
		// 				"2":<Tag color="cyan">图片</Tag>,
		// 				"3":<Tag color="geekblue">视频</Tag>,
		// 				"4":<Tag color="purple">音频</Tag>,
		// 				"5":<Tag color="magenta">其它</Tag>
		// 			}[value]
		// 		}
		// 	},{
		// 		title: '操作',
		// 		key: 'action',
		// 		fixed: 'right',
		// 		width: 150,
		// 		render: (text, record) => {
		// 			return <div>
		// 				<Tag color="#108ee9" onClick={() => this.handleUpdate(record)}>编辑</Tag>
		// 				<Tag color="#f45656" onClick={() => this.handleDelete(record)}>删除</Tag>
		// 			</div>
		// 		}
		// 	}
		// ];
		const count = this.state.count;
		const current = this.state.requestParams.page;
		const pageSize = this.state.requestParams.limit;
		return (
			<div style={{padding: 20}}>
				<Card className="page-search-wrap">
					<Form layout="inline" ref={this.searchFormRef} onFinish={this.searchSubmit}>
						<Form.Item
							label="查询条件"
							name="field"
						>
							<Select
								placeholder="请选择查询条件"
								allowClear
								style={{width: 150}}
							>
								<Option value="type">文件类型</Option>
								<Option value="extension">后缀名</Option>
								<Option value="status">状态</Option>
							</Select>
						</Form.Item>
						<Form.Item
							noStyle
							shouldUpdate={(prevValues, currentValues) => prevValues.field!== currentValues.field}
						>
							{({ getFieldValue }) => {
								
								return getFieldValue('field') === "extension" ?
									<Form.Item
										label="请输入"
										name="value"
									>
										<Input style={{width: 150}} autoComplete="off"/>
									</Form.Item>
									: getFieldValue('field') === "status" ?
									<Form.Item
										label="请选择"
										name="value"
									>
										<Select
											placeholder="请选择是否启用"
											allowClear
											style={{width: 150}}
										>
											<Option value={1}>已启用</Option>
											<Option value={0}>未启用</Option>
										</Select>
									</Form.Item>
									:
									<Form.Item
										label="请选择"
										name="value"
									>
										<Select
											placeholder="请选择查询类型"
											allowClear
											style={{width: 150}}
										>
											<Option value={1}>文档</Option>
											<Option value={2}>图片</Option>
											<Option value={3}>视频</Option>
											<Option value={4}>音频</Option>
											<Option value={5}>其它</Option>
										</Select>
									</Form.Item>
							}}
						</Form.Item>
						<Form.Item>
							<Button type="primary" htmlType="submit">
								查询
							</Button>
							<Button htmlType="button" onClick={()=>this.searchFormRef.current.resetFields()}>
								重置
							</Button>
						</Form.Item>
					</Form>
					{/*<Button className="float-right" type="primary" onClick={this.handleCreate}>添加扩展名</Button>*/}
				</Card>
				<Card>
					{/*
						<Table
							columns={columns}
							dataSource={this.state.dataSource}
							pagination={false}
						/>
					*/}
					<ul className="ext-wrapper">
						{
							this.state.dataSource.map(item=>{
								return <li key={item.id} className={`ext-content ext-style-${item.type}`}>
									<h3>
										{item.extension}
									</h3>
									<p>
										{typeList[item.type]}
									</p>
									<div>
										<Switch 
											checkedChildren="启用"
											unCheckedChildren="禁用"
											checked={item.status === 1? true: false}
											onChange={(checked)=>this.expUpdate(checked,item.id)}
										/>
									</div>
								</li>
							})
						}
					</ul>
					
					<ConfigProvider locale={zhCN}>
						<Pagination
							showQuickJumper
							showSizeChanger
							current={current}
							defaultPageSize={pageSize}
							total={count}
							showTotal={total => `共 ${total} 条`}
							pageSizeOptions={this.state.pageSizeOptions}
							onChange={this.pageChange}
							onShowSizeChange={this.pageSizeChange}
						/>
					</ConfigProvider>
				</Card>
				<Modal
					title={this.state.formTitle}
					visible={this.state.isCreateVisible}
					onCancel={()=>this.setState({isCreateVisible: false})}
					footer={null}
				>
					<Form
						{...layout}
						ref={this.formRef}
						onFinish={this.handleSubmit}
					>
						<Form.Item
							label="文件类型"
							name="type"
							rules={[
								{required: true, message: "请选择扩展名类型"},
							]}
						>
							<Select
								placeholder="请选择文件类型"
								allowClear
							>
								<Option value={1}>文档</Option>
								<Option value={2}>图片</Option>
								<Option value={3}>视频</Option>
								<Option value={4}>音频</Option>
								<Option value={5}>其它</Option>
							</Select>
						</Form.Item>
						<Form.Item
							label="扩展名"
							name="extension"
							rules={[
								{required: true, message: "请输入扩展名"},
							]}
						>
						    <Input autoComplete="off" />
						</Form.Item>
						
						<Form.Item  {...tailLayout}>
							<Button type="primary" htmlType="submit">
							    保存
							</Button>
							<Button htmlType="button" onClick={()=>this.formRef.current.resetFields()}>
								重置
							</Button>
						</Form.Item>
					</Form>
				</Modal>
			</div>
		)
	}
}

export default IpPage;